import React, { useState, useEffect } from 'react';
import { Modal, Button, Steps, Spin, Input, Select, Progress, Descriptions, Divider, ConfigProvider } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import './Upload.css'; 

const { Step } = Steps;
const { Option } = Select;

const UploadModal = ({ isVisible, handleOk, handleCancel, modelName }) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [modelInfo, setModelInfo] = useState({
    name: '',
    type: '',
    mission: ''
  });

  const stepsToken = {
    colorText: 'aliceblue',
    colorTextHeading: 'aliceblue',
    colorTextLabel: 'aliceblue'
  };

  const steps = [
    {
      title: 'Start',
      description: '开始上传模型',
    },
    {
      title: '模型规范性检查',
      description: '正在检查模型规范性',
    },
    {
      title: '模型可用性测试',
      description: '正在测试模型可用性',
    },
    {
      title: '模型信息入库',
      description: '正在将模型信息入库',
    },
    {
      title: '模型压缩',
      description: '正在压缩模型',
    },
    {
      title: '模型检验',
      description: '正在检验模型',
    },
    {
      title: 'Success',
      description: '模型上传成功',
    },
  ];

  useEffect(() => {
    if (isVisible) {
      setCurrentStep(0);
      setLoading(false);
      setProgress(0);
      setModelInfo({
        name: '',
        type: '',
        mission: ''
      });
    }
  }, [isVisible]);

  const handleNextStep = () => {
    if (currentStep < steps.length - 1) {
      setLoading(true);
      setTimeout(() => {
        setCurrentStep(currentStep + 1);
        setLoading(false);
        setProgress(0);
      }, 1000);
    }
  };

  const handleUpload = () => {
    // 模拟上传过程
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      handleNextStep();
    }, 1000);
  };

  const handleProgress = () => {
    setProgress(0);
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return Math.round(prev + 3.33); // 3秒内从0%到100%，并四舍五入为整数
      });
    }, 100);
  };

  useEffect(() => {
    if (currentStep > 0 && currentStep < 6) {
      handleProgress();
    }
  }, [currentStep]);

  return (
    <Modal title={`Uploading New Model`} open={isVisible} onOk={handleOk} onCancel={handleCancel} className="ant-modal-upload" width={1500}>
      <Divider/>
      <ConfigProvider componentSize="middle" theme={{ token: stepsToken }}>
      <Steps direction='horizontal' current={currentStep} >
        {steps.map((step, index) => (
          <Step key={index} title={step.title} description={step.description} />
        ))}
      </Steps>
      </ConfigProvider>
      <Divider/>
      <div>
        {currentStep === 0 && (
          <>
            <p className='input-label'>Model Name: </p>
            <Input 
              placeholder="Enter Model Name" 
              value={modelInfo.name} 
              onChange={(e) => setModelInfo({ ...modelInfo, name: e.target.value })} 
              style={{ marginBottom: 20, width: '200px' }} 
            />
            <p className='input-label'>Select Model Type</p>
            <Select 
              placeholder="Select Model Type" 
              value={modelInfo.type} 
              onChange={(value) => setModelInfo({ ...modelInfo, type: value })} 
              style={{ width: '100%', marginBottom: 20 }}
            >
              <Option value="resNet">resNet</Option>
              <Option value="YOLO">YOLO</Option>
            </Select>
            <p className='input-label'>Select Model Mission</p>
            <Select 
              placeholder="Select Mission" 
              value={modelInfo.mission} 
              onChange={(value) => setModelInfo({ ...modelInfo, mission: value })} 
              style={{ width: '100%', marginBottom: 20 }}
            >
              <Option value="任务1">任务1</Option>
              <Option value="任务2">任务2</Option>
              <Option value="任务3">任务3</Option>
            </Select>
            <Button 
              type="primary" 
              icon={<UploadOutlined />} 
              onClick={handleUpload}
              disabled={!modelInfo.name || !modelInfo.type || !modelInfo.mission}
            >
              Upload
            </Button>
          </>
        )}
        {currentStep > 0 && currentStep < 4 && (
          <>
            <ConfigProvider componentSize="middle" theme={{ token: stepsToken }}>
            <Progress percent={progress} />
            <Divider/>
            {progress === 100 && (
              <Button type="primary" onClick={handleNextStep}>
                Next Step
              </Button>
            )}
            </ConfigProvider>
          </>
        )}
        {currentStep > 3 && currentStep < 6 && (
          <>
            <ConfigProvider componentSize="middle" theme={{ token: stepsToken }}>
            <Progress percent={progress} />
            <Divider/>
            {progress === 100 }
            </ConfigProvider>
          </>
        )}
        {currentStep === 4 && progress === 100 && (
          <>
            <ConfigProvider componentSize="middle" theme={{ token: stepsToken }}>
            <Descriptions title="压缩效果">
              <Descriptions.Item label="未压缩体积">217.2M</Descriptions.Item>
              <Descriptions.Item label="未压缩正确率">77.71%</Descriptions.Item>
              <Descriptions.Item label="压缩体积">59.28M</Descriptions.Item>
              <Descriptions.Item label="压缩正确率">72.22%</Descriptions.Item>
            </Descriptions>
            <Divider/>
            <Button type="primary" onClick={handleNextStep}>
              Next Step
            </Button>
            </ConfigProvider>
          </>
        )}
        {currentStep === 5 && progress === 100 && (
          <>
            <ConfigProvider componentSize="middle" theme={{ token: stepsToken }}>
            <Descriptions title="模型检验信息">
              <Descriptions.Item label="CPU占用">572.1M</Descriptions.Item>
              <Descriptions.Item label="CPU温度">91℃</Descriptions.Item>
              <Descriptions.Item label="推理用时">50ms</Descriptions.Item>
            </Descriptions>
            <Divider/>
            <Button type="primary" onClick={handleNextStep}>
              Next Step
            </Button>
            </ConfigProvider>
          </>
        )}
        {currentStep === 6 && (
          <p className='input-label'>模型上传成功！</p>
        )}
      </div>
    </Modal>
  );
};

export default UploadModal;